import React from 'react';
import { Form, Input, Select, Button, Row, Col } from 'antd';

const { Option } = Select;

/**
 * 角色搜索表单组件
 * @param {Object} props
 * @param {Function} props.onSearch - 搜索回调
 * @param {Function} props.onReset - 重置回调
 */
const SearchForm = ({ onSearch, onReset }) => {
  const [form] = Form.useForm();

  // 处理搜索
  const handleSearch = () => {
    const values = form.getFieldsValue();
    onSearch(values);
  };

  // 处理重置
  const handleReset = () => {
    form.resetFields();
    onReset();
  };

  return (
    <Form
      form={form}
      layout="inline"
      style={{ marginBottom: 24 }}
    >
      <Row gutter={24} style={{ width: '100%' }}>
        <Col span={8}>
          <Form.Item name="name" label="角色名称">
            <Input placeholder="请输入角色名称" allowClear />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item name="status" label="状态">
            <Select placeholder="请选择状态" allowClear>
              <Option value={1}>正常</Option>
              <Option value={0}>禁用</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item>
            <Button type="primary" onClick={handleSearch} style={{ marginRight: 8 }}>
              搜索
            </Button>
            <Button onClick={handleReset}>
              重置
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};

export default SearchForm;